* {
    margin: 0;
    padding: 0;
}

#frame2 {
    position: absolute;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 5px;
}

#photos2 img {
    float: left;
    width: 33.33333%;
    height: 500px;
}

#photos2 {
    position: absolute;
    z-index: 9;
    width: calc(100% * 3);
    /*---修改图片数量的话需要修改下面的动画参数*/
}

.play2 {
    animation: ma2 10s ease-out infinite;
}

@keyframes ma2 {

    0%,
    30% {
        margin-left: 0px;
    }

    35%,
    60% {
        margin-left: -100%;
    }

    65%,
    100% {
        margin-left: -200%;
    }

}


#frame {
    position: absolute;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 5px;
}

#photos img {
    float: left;
    width: 33.33333%;
    height: 500px;
}

#photos {
    position: absolute;
    z-index: 9;
    width: calc(100% * 3);
    /*---修改图片数量的话需要修改下面的动画参数*/
}

.play {
    animation: ma1 20s ease-out infinite;
}

@keyframes ma1 {

    0%,
    30% {
        margin-left: 0px;
    }

    35%,
    60% {
        margin-left: -100%;
    }

    65%,
    100% {
        margin-left: -200%;
    }

}